import React from 'react'
import { Col, Row, Form, Input, Modal, Button } from 'antd'

const FormItem = Form.Item

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
  style: {
    marginBottom: 10
  }
}

const modal = ({
  selectedRowOfBlackList,
  modalVisible,
  handleOk,
  handleCancel,
  form: {
    getFieldDecorator,
    getFieldsValue,
    setFieldsValue,
  },
}) => {

  const handleConfirm = () => {
    let fields = getFieldsValue()
    handleOk({
      id: selectedRowOfBlackList[0].id,
      description: fields.description
    })
  }

  return (
    <Modal
      title="编辑黑名单"
      visible={modalVisible}
      onOk={handleConfirm}
      onCancel={handleCancel}
    >
      <Row gutter={24}>
        <Col md={12}>
          <FormItem label="微信号" {...formItemLayout}>
            {getFieldDecorator('wechatId', { initialValue: selectedRowOfBlackList.length > 0 ? selectedRowOfBlackList[0].dwechatId : '' })(<Input style={{ width: "100%" }} disabled />)}
          </FormItem>
        </Col>
        <Col md={12}>
          <FormItem label="说明" {...formItemLayout}>
            {getFieldDecorator('description', { initialValue: selectedRowOfBlackList.length > 0 ? selectedRowOfBlackList[0].description : '' })(<Input style={{ width: "100%" }} />)}
          </FormItem>
        </Col>
      </Row>
    </Modal>
  )
}

export default Form.create()(modal)
